<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> -->
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
</head>

<body>
    <div class="box"></div>
    <button>点击</button>
    <!-- <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul> -->
    <script>
        function Jq(arg) {
            if(typeof arg === "string"){
                this.eles = document.querySelectorAll(arg);
            }else{
                this.eles  = [arg];
            }
        }
        Jq.prototype.eq = function (index) {
            return  new Jq(this.eles[index]);  // 返还了一个实例化的Jq对象
        }

        Jq.prototype.css = function(styleName,styleValue){
            console.log("css方法执行了");
            this.eles.forEach(function(ele){
                ele.style[styleName] = styleValue;
            })
            
            return this;
        }
        Jq.prototype.click = function(cb){
            console.log("click执行了");
            this.eles[0].addEventListener("click",cb);
            return this;
        }

        Jq.prototype.on = function(eventName,cb){
            // 循环绑定事件
            this.eles.forEach(function(ele){
                ele.addEventListener(eventName,cb);
            })
        }
        Jq.prototype.animate = function(){  // 不定参的处理，参数不确定
            // 默认过度时间 
            var time = 500;
            if(typeof arguments[1] =="number"){
                time = arguments[1];
            }

            time /= 1000;
            // console.log(time);
            // console.log(arguments);
            // 循环多个元素     
            var arg = arguments;
            this.eles.forEach(function(ele){
                // 给多个元素设置多个样式
                // console.log(arguments);
                for(var key in arg[0]){
                    // 设置过度样式 ，默认过度时间
                    ele.style.transition = time+"s all";
                    // 如果传入的是数字，自动加上单位 
                    if(typeof arg[0][key] === "number"){
                        arg[0][key] = arg[0][key] + "px";
                    }
                    console.log(key)
                    ele.style[key] = arg[0][key];
                }
               
                // if()
            })
            if(typeof arg[arg.length-1] === "function"){
                setTimeout(arg[arg.length-1], time*1000);
             }

        }

        function $(arg) {
            return new Jq(arg);
        }
        // $("li").eq(4).css("background","red")

    // 实现一个 on方法 和 一个 animate方法 ；都支持链式
    // $("div").animate({width:200},2000,function(){
    //     console.log("运动完毕");
    // })
    
        // 实现一个on方法；
        // $("li").on("click",function(){
        //     console.log(111);
        // })

        // $("li").eq(1).on("click",function(){
        //     console.log("点击了");
        // })

        // 实现一个animate方法

        $("button").click(function(){
            $(".box").animate({width:300,height:300},2000,function(){
                console.log("执行完毕了");
             });
        })

    </script>
</body>

</html>